<template>
    <div class="">
        <UserinfoAdd v-if="dialogVisible" @close="addClose" @update="update" :addForm="addForm" ></UserinfoAdd>
        <ELTable v-bind="tableConfig" ref="searchSubmit">
            <!-- 搜索 -->
            <template #search="{ searchSubmit, params }">
                <div>
                    <el-form :inline="true" class="demo-form-inline">
                        <!-- 状态 -->
                        <el-form-item label="楼栋">
                            <BuildSelect  @update="(e: any) => cascaderChange(e, params)"></BuildSelect>
                        </el-form-item>
                        <el-form-item label="姓名">
                            <el-input v-model="params.name" placeholder="请输入姓名" />
                        </el-form-item>
                        <el-form-item label="电话">
                            <el-input v-model="params.mobile" placeholder="请输入电话" />
                        </el-form-item>
                        <el-form-item label="房间号">
                            <el-input v-model="params.houseno" placeholder="请输入房间号" />
                        </el-form-item>
                        <el-form-item label="房间号">
                            <el-select clearable v-model="params.usertype" style="width:120px" placeholder="请选择状态">
                                <el-option label="业主" value="1" />
                                <el-option label="租户" value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="searchSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </template>
            <!-- 功能部分 -->
             <template #buttons="{ deleteAllHandle }">
                <div>
                    <el-button type="primary" @click="dialogVisible=true" >添加</el-button>
                    <el-button type="danger" @click="deleteAllHandle">删除</el-button>
                </div>
             </template>
            <!-- 表格部分 -->
            <template #state="{ scope }">
                <div>
                    {{ scope.row.state === 1 ? '未审核' : '已审核' }}
                </div>
            </template>
            <template #addtime="{ scope }">
                <div>
                    {{ formData(scope.row.date) }}
                </div>
            </template>
            <template #operate="{ scope, delrow }">
                <div>
                    <el-button type="primary" @click="changeData(scope.row)">修改</el-button>
                    <el-button type="danger" @click="delrow(scope.row.id)">删除</el-button>
                </div>
            </template>
        </ELTable>
    </div>
</template>

<script lang='ts' setup>
import { ref, watch, reactive } from "vue"
import ELTable, { TableType } from "../../components/ELTable.vue";
import { userinfoList, deluserinfo, delalluserinfo } from '../../service/userinfo/userinfolist'
import { column } from "./colum";
import moment from 'moment';
import BuildSelect from "../../components/BuildSelect.vue";
import UserinfoAdd from "../../components/UserinfoAdd.vue";


const dialogVisible = ref(false)
const addClose = () => {
    addForm.value = {
        id: 0,
    photo: "",
    name: "",
    buildingid: null,
    houseid: null,
    usertype: null,
    sex: 0,
    mobile: "",
    usernative: "",
    cardid: "",
    nation: ""
    }
    dialogVisible.value = false
}

//修改数据
const changeData = (row:any) => {
    addForm.value = row
    dialogVisible.value = true
}

export type addFromType = {
        id: number,
        photo:string,
        name:string,
        buildingid?: number | null,
        houseid: number | null,
        usertype:number | null,
        sex:number,
        mobile: string,
        usernative:string,
        cardid: string,
        nation:string
}
const addForm = ref<addFromType>({
    id: 0,
    photo: "",
    name: "",
    buildingid: null,
    houseid: null,
    usertype: null,
    sex: 0,
    mobile: "",
    usernative: "",
    cardid: "",
    nation: ""
})
//添加完成数据更新
const searchSubmit = ref()
const update = () => {
    searchSubmit.value.searchSubmit()
}
//房屋信息改变
const cascaderChange = (e: any, params: any) => {
    console.log(e);
    console.log(params);
    if (!e) params.buildingid = null;
    else {
        params.buildingid = e[e.length - 1];
    }
}
//日期格式
const formData = (a: string) => {
    return moment(a).format('YYYY-MM-DD');
}

const tableConfig = reactive<TableType>({
    column: column,
    isSelection: true,
    loadData: userinfoList,
    delDate: deluserinfo,
    delallDate: delalluserinfo,
    searchParams: {},
    pageConfig: {

    }
})
</script>

<style lang="less" scoped>
@import url(../../assets/userinfo/userinfo.less);
</style>
